<template>
    <div class="info-collect">
        <Crumb name="Unit Database"></Crumb>

        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Unit
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By part No"
                        prefix-icon="el-icon-search"
                > </el-input>
                <el-button
                        size="small"
                        type="primary"
                > Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="part"
                        @expand-change="getDetail"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            type="expand"
                            prop="supplierName"
                            width="100"
                            label="More"

                    >
                    </el-table-column>
                    <el-table-column
                            prop="supplierName"
                            label="Supplier"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="models"
                            label="Model"
                           >
                    </el-table-column>
                    <el-table-column
                            prop="purchasePrice"
                            label="Purchase Price"
                    >
                        <template slot-scope="unit">
                            <div>
                                <span v-if="!showPrice">
                                    *******
                                    <i class="el-icon-view" style="cursor: pointer;color: #409eff" @click="passwordShow = true"/>
                                </span>
                                <span v-else>{{unit.row.purchasePrice}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="Type"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="stockNum"
                            label="Stock Remaining"
                    >
                    </el-table-column>
                    <el-table-column label="Opr" width="210">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="getDetail(scope.row)

                                            dialogVisible = true">Modify
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="console.log(scope.$index, scope.row)">Abandon
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size=10
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"> </el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Unit Database"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >

                    <el-form :model="ruleForm"  ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item v-if="ruleForm.deviceMaster" label="Purchase Price" prop="brand">
                            <el-input v-model="ruleForm.deviceMaster.purchasePrice"> </el-input>
                        </el-form-item>

                        <el-form-item :label="item.fieldName" v-for="item in model" :key="item.id">
                            <el-input v-if="!item.genre" v-model="item.value"> </el-input>
                            <el-select v-else v-model="item.value" >
                                <el-option v-for="item in cataList" :key="item.id" :value="item.id" :label="item.styleName"> </el-option>
                            </el-select>
                        </el-form-item>
                        <!--<el-form-item label="Image">-->
                            <!--<el-upload-->
                                    <!--:on-success="successLoad"-->
                                    <!--class="upload-demo"-->
                                    <!--list-type="picture"-->
                                    <!--:file-list="imageList"-->
                                    <!--drag-->
                                    <!--name="upload_file"-->
                                    <!--action="http://192.168.1.113:8080/file/uploadFileCDN.do"-->
                                    <!--multiple>-->
                                <!--<i class="el-icon-upload"></i>-->
                                <!--<div class="el-upload__text">Drag here，or <em>Click to upload</em></div>-->
                            <!--</el-upload>-->
                        <!--</el-form-item>-->
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                    title="Admin Pass"
                    :visible.sync = "passwordShow"
                    width="20%"
                >
                    <el-input type="password" v-model="password"/>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="passwordShow = false">Cancel</el-button>
                        <el-button type="primary" @click="confirmPass">Confirm</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                        title="Unit Database"
                        top="10"
                        :visible.sync="dialogVisible1"
                        width="80%"
                >
                    <el-form label-width="200px" class="demo-ruleForm">
                        <el-form-item  label="Purchase Price">
                            <el-input v-model="unit.purchasePrice"> </el-input>
                        </el-form-item>
                        <el-form-item  label="Model">
                            <el-input v-model="unit.models"> </el-input>
                        </el-form-item>
                        <el-form-item  label="Supplier">
                            <el-input v-model="unit.supplierId"> </el-input>
                        </el-form-item>
                        <el-form-item label="type">
                            <el-select v-model="unit.type">
                                <el-option :key="item.id" v-for="item in unitTypeList" :value="item.id" :label="item.typeName"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="item.fieldName" v-for="item in newModel" :key="item.id">
                            <el-input v-if="!item.genre" v-model="item.value"> </el-input>
                            <el-select v-else v-model="item.value" >
                                <el-option v-for="item in cataList" :key="item.id" :value="item.id" :label="item.styleName">  </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">Cancel</el-button>
                        <el-button type="primary" @click="subAdd">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getUnitList,getUnitDetail,getCataList,getModel,addUnit,modUnit,getUnitType} from "../../api/unit";
    import {ADMIN_PASS} from "../../util/config";

    export default {
        name: "info-collect",
        data() {
            return {
                unitTypeList:[],
                unit:{},
                cataList:[],
                model:[],
                newModel:[],
                partList: [],
                part:[],
                ruleForm: {},
                rules: {
                },
                key: '',
                total: 0,
                dialogVisible:false,
                dialogVisible1:false,
                passwordShow:false,
                password:'',
                showPrice:false
            }
        },
        created(){
            this.getUnitList();
            this.getCataList();
            this.getUnitType()
        },
        methods: {
            confirmPass(){
                if (this.password === ADMIN_PASS) {
                    this.showPrice = true;
                    this.passwordShow = false
                } else {
                    this.$message.warning("If you don't know the password,Please do not try again,it will be recorded");
                }
            },
            submitForm(){
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                            const target = this.model.filter(item=>{
                                return item.genre === 0
                            });
                            const parameter = target.map(item=>{
                                return {
                                    key:item.id,
                                    value:item.value
                                }
                            });
                            const target1 = this.model.filter(item=>{
                                return item.genre !== 0
                            });
                            const configure = target1.map(item=>{
                                return {
                                    key:item.id,
                                    value:item.value
                                }
                            });
                           let {status} = await modUnit(this.ruleForm.deviceMaster.id,this.ruleForm.deviceMaster.purchasePrice,JSON.stringify(parameter),JSON.stringify(configure));
                           if(status===0) {
                               this.getUnitList();
                               this.$message({
                                   message:'Modify Successfully',
                                   type:'success'
                               });
                               this.dialogVisible = false
                           }

                    } else {
                        return false;
                    }
                });
            },
            async subAdd(){
                const target = this.newModel.filter(item=>{
                    return item.genre === 0
                });
                const parameter = target.map(item=>{
                    return {
                        key:item.id,
                        value:item.value
                    }
                });
                const target1 = this.newModel.filter(item=>{
                    return item.genre !== 0
                });
                const configure = target1.map(item=>{
                    return {
                        key:item.id,
                        value:item.value
                    }
                });
                const {supplierId,models,purchasePrice,type} = this.unit;
                let {status} = await addUnit(supplierId,models,purchasePrice,type,JSON.stringify(parameter),JSON.stringify(configure));
                if(status===0) {
                    this.getUnitList();
                    this.$message({
                        message:'Add Successfully',
                        type:'success'
                    });
                    this.dialogVisible1 = false
                }
            },
            async getUnitType(){
                let {status,data} = await getUnitType();
                if (status === 0 ) {
                    this.unitTypeList = data
                }
            },
            async getDetail(r){
                // if (r.detail){
                //     this.ruleForm = r.detail
                //     return
                // }
                let {status,data} = await getUnitDetail(r.id);
                let datas = await getModel(r.type);
                if (status === 0 && datas.status === 0) {
                  const target =  this.part.find(item=>item.id === r.id);
                  target.detail = data;
                  this.ruleForm = data;
                  this.$set(target,'detail',target);
                  let model = datas.data.map(item=>{
                      let target = {};
                      if (data.parameter){
                           target = data.parameter.find(items=>items.keyName === item.fieldName);
                           if (target) {
                               item.value = target.valueName;
                           }
                      }
                      if(data.configure){
                           target = data.configure.find(items=>items.keyName === item.fieldName);
                           if (target) {
                               item.value = target.valueId;
                           }
                      }
                      return item
                  });
                    this.model = model
                }
            },
            async getModel(r){
                let {status,data} = await getModel(r);
                if (status === 0) {
                    this.newModel = data
                }
            },
            clear(){
                this.unit= {};
                this.newModel=[]
            },
            openAdd(){
                this.clear();
                this.dialogVisible1 = true
            },
            openEdit(r){
                this.getPartDetail(r.id);
                this.dialogVisible = true

            },
            changePage(page) {
               this.part = this.partList.slice((page - 1) * 10, page * 10)
            },
            async getUnitList(){
                let {status,data,msg} = await getUnitList();
                if(status === 0 ) {
                    this.partList = data;
                    this.part = data.slice(0,10);
                    this.total = data.length
                } else {
                    this.$message({
                        type:'error',
                        message:msg
                    })
                }
            },
            async getCataList(){
                let {status,data} = await getCataList();
                if (status === 0 ) {
                    this.cataList = data
                }
            }
        },
        watch:{
           'unit.type': {
               handler(nVal){
                   this.getModel(nVal)
               },
               deep:true
           }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>